<template>
    <el-main class="image-main" v-loading="loading">
      
       <div class="top p-3">

        <el-row :gutter="10">
          <el-col :span="6" :offset="0" v-for="(item,index) in list" :key="index">
              <el-card shadow="hover" class="relative mb-3" :body-style="{ 'padding':0 }" :class="{ 'border-blue-500':item.checked }">
                <el-image :src="item.url" fit="cover" class="h-[150px]"  :preview-src-list="[item.url]"
                :initial-index="0" style="width: 100%;" ></el-image>
                <div class="image-title">{{ item.name }}</div>
                <div class="flex items-center justify-center p-2">
                  <el-checkbox  v-if="openChoose" v-model="item.checked" @change="changeCheckBox(item)"/>
                  
                  <el-button plain type="primary" size="small" text @click="updateImageName(item.name)">重命名</el-button>
                  <el-popconfirm title="确认要删除吗?" confirm-button-text="确认" cancel-button-text="取消"
                 
                  >                  
                  <!-- @confirm="delimg2(item.name)" -->
                   <template #reference>
                    <el-button type="primary" size="small" text>删除</el-button>
                  </template>
                  </el-popconfirm>
                </div>
              </el-card>
          </el-col>
        </el-row>
       


        </div>
        <div class="bottom">
          <el-pagination 
            background 
            layout="prev,pager, next" 
            :total="total" 
            :current-page="currentPage" 
            :page-size="limit" 
            @current-change="getData"/>
        </div>
    </el-main>

    <!-- 抽屉 -->
    <el-drawer v-model="drawer" title="上传图片" >
      <span>Hi there!</span>
      <UploadFile/>
    </el-drawer>
</template>
<script setup>
import { computed, ref } from "vue"
import {
  getImageList
} from "@/api/image_class.js"
import { alertData,toast } from '@/utils/toast.js'
import UploadFile from "./UploadFile.vue";

// 上传图片
const drawer = ref(false)
const openUploadFile = () => drawer.value=true
// 分页
const currentPage = ref(1)
const total = ref(0)
const limit = ref(4)
const list = ref([])
const loading = ref(false)
const image_class_id = ref(0)
//获取数据
function getData(p = null){
    if(typeof p == "number"){
        currentPage.value = p
    }

    loading.value = true
    getImageList(image_class_id.value,currentPage.value)
    .then(res=>{
        total.value = res.totalCount
        list.value = res.list.map(o=>{
          o.checked = false
          return o
        })
    })
    .finally(()=>{
        loading.value = false
    })
}

// 根据分类ID重新加载图片列表
const loadData = (mid)=>{
  currentPage.value = 1
  image_class_id.value = mid
  getData()
}
// 修改图片名称
function updateImageName (item) {
  alertData("修改图片名称",item)
}

// 选择
const emit = defineEmits(["choose"])
const checkedImage = computed(()=>list.value.filter(o=>o.checked))
const changeCheckBox = (item)=>{
  if(item.checked && checkedImage.value.length>1){
    item.checked  = false
    return toast("最多只能选择一张图片","error")
  }  
  // 通知父主件，被选中的图片
  emit("choose",checkedImage.value)
}

defineProps({
  openChoose:{
    type:Boolean,
    default:false
  }
})

defineExpose({
  loadData,openUploadFile
})
</script>
<style>
.image-main{
  position: relative;
}
.image-main .top{
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 50px;
  overflow-y: auto;
}
.image-main .bottom{
  position: absolute;
  bottom: 0;
  height: 50px;
  left: 0;
  right: 0;
  @apply flex items-center justify-center;
}
.image-title{
  position: absolute;
  top: 122px;
  left: -1px;
  right: -1px;
  @apply text-sm truncate text-gray-100 bg-opacity-50 bg-gray-800 px-2 py-1;
}
</style>